<template>
  <a-modal v-bind="$attrs" title="公告" :footer="null" centered :width="'80%'" :mask="true" :maskClosable="false" :destroyOnClose="true" @cancel="cancelHandler">
    <div class="artice">
      <h2 class="title">{{detailData.title}}</h2>
      <p class="sub-title">
        <span class="time">时间：{{detailData.lastUpdateDate}}</span>
        <span>作者：{{detailData.author}}</span>
      </p>
      <div class="txt" v-html="detailData.content"></div>
    </div>
  </a-modal>
</template>
<script>
export default {
  name: 'NoticeDetail',
  props: {
    detailData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
    }
  },
  methods: {
    cancelHandler () {
      this.$emit('cancel')
    },
    okHandler () {
      this.$emit('ok')
    }
  }
}
</script>
<style lang="less" scoped>
.artice {
  .title {
    font-size: 16px;
    margin-bottom: 16px;
  }
  .sub-title {
    font-size: 12px;
    margin-bottom: 12px;
    .time {
      margin-right: 20px;
    }
  }
  .txt {
    p {
      margin-bottom: 10px;
    }
  }
}
</style>